Saetl.net

Simple And Easy TempLate

Pure CSS Fish Eye Menuの使い方

  1. 下記ページの ｢Download Now!｣ よりファイル1式をダウンロード。
  2. ダウンロードしたファイルを任意の場所にコピー。
    ファイル構成
  3. 動作させるファイル（サンプルではindex.html）にコードを記述。
    ＜パスは上記ファイル構成の場合なので環境にあわせて変更＞
    ・head部分にcssファイルを読み込ませるためのコードを記述。 
    <head>
<!--css部分を外部化したファイル-->
<link rel="stylesheet" type="text/css" href="css/Pure CSS Fish Eye Menu.css" />
</head>

    サンプルのcssコード（サンプルのcssは改変しています）

    /*ページ設定部分（style.cssなどで設定していれば削除する）*/
body, ul, li, h1, h2, span {
	margin: 0;
	padding: 0;
}
body {
	font: 75% Verdana, Arial;
	color: #333;
	background: #fff
}
#container {
	width: 500px;
	margin: 50px auto;
}
/*ここまでページ設定部分*/


/*ここからPure CSS Fish Eye Menuの設定*/
.expand-down {
	font-family: Arial, Helvetica, sans-serif;
	line-height: normal;
	margin-top: 20px;
	height: 150px;
	width: 500px;
	background: url(images/macosx-style-background.png) no-repeat;
	margin-bottom: 30px;
}
.expand-down * {
	margin: 0;
	padding: 0;
}
.expand-down ul {
	padding-top: 10px;
	margin-left: 10px;
}
.expand-down ul li {
	float: left;
	list-style-type: none;
}
.expand-down ul li a {
	text-decoration: none;
}
.expand-down ul li a img {
	width: 50px;
	height: 50px;
	border: none;
}
.expand-down ul li a span {
	display: none;
}
.expand-down ul li:hover a span {
	display: block;
	font-size: 14px;
	text-align: center;
	color: #333;
}
.expand-down ul li:hover a img {
	width: 100px;
	height: 100px;
}
.expand-down ul li:hover + li a img {
	width: 60px;
	height: 60px;
}
.expand-down ul li:hover + li + li a img {
	width: 55px;
	height: 55px;
}
.expand-up {
	font-family: Arial, Helvetica, sans-serif;
	line-height: normal;
	height: 150px;
	width: 500px;
	background: url(images/macosx-style-background.png) no-repeat;
	overflow: visible;
	margin-bottom: 30px;
}
.expand-up * {
	margin: 0;
	padding: 0;
}
.expand-up ul {
	margin-left: 10px;
}
.expand-up ul li {
	float: left;
	list-style-type: none;
	padding-top: 65px;
	margin-top: 25px;
}
.expand-up ul li a {
	text-decoration: none;
}
.expand-up ul li a img {
	width: 50px;
	height: 50px;
	border: none;
}
.expand-up ul li a span {
	display: none;
	font-size: 14px;
	text-align: center;
	color: #333;
}
.expand-up ul li:hover a span {
	display: block;
	margin-top: -65px;
}
.expand-up ul li:hover a img {
	width: 100px;
	height: 100px;
}
.expand-up ul li:hover + li a img {
	width: 60px;
	height: 60px;
	margin-top: -10px;
}
.expand-up ul li:hover + li + li a img {
	width: 55px;
	height: 55px;
	margin-top: -5px;
    ・<body></body>内にコードを記述 
    <div class="expand-down">
    <ul>
      <li> <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Valid CSS" rel="nofollow" target="_blank"> <img src="images/w3c-valid-css-trans.png" alt="Valid CSS" title="Valid CSS" /> <span>Valid CSS</span> </a> </li>
      <li> <a href="http://validator.w3.org/check/referer" title="Valid XHtml" rel="nofollow" target="_blank"> <img src="images/w3c-valid-xhtml-trans.png" alt="Valid XHtml" title="Valid XHtml" /> <span>Valid XHTML</span> </a> </li>
      <li> <a href="http://www.opera.com/download/" title="Opera" rel="nofollow" target="_blank"> <img src="images/opera-trans.png" alt="Opera" title="Opera" /> <span>Opera</span> </a> </li>
      <li> <a href="http://www.apple.com/safari/download/" title="Safari" rel="nofollow" target="_blank"> <img src="images/safari-trans.png" alt="Safari" title="Safari" /> <span>Safari</span> </a> </li>
      <li> <a href="http://www.mozilla.com/en-US/firefox/" title="Firefox" rel="nofollow" target="_blank"> <img src="images/firefox-trans.png" alt="Firefox" title="Firefox" /> <span>Firefox</span> </a> </li>
      <li> <a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank"> <img src="images/google-chrome-trans.png" alt="Google Chrome" title="Google Chrome" /> <span>Google Chrome</span> </a> </li>
      <li> <a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx" title="Internet Explorer" rel="nofollow" target="_blank"> <img src="images/ie-trans.png" alt="Internet Explorer" title="Internet Explorer" /> <span>Internet Explorer</span> </a> </li>
      <li> <a href="http://www.konqueror.org/download/" title="Konqueror" rel="nofollow" target="_blank"> <img src="images/konqueror-trans.png" alt="Konqueror" title="Konqueror" /> <span>Konqueror</span> </a> </li>
    </ul>
  </div>
  <div class="expand-up">
    <ul>
      <li> <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Valid CSS" rel="nofollow" target="_blank"> <span>Valid CSS</span> <img src="images/w3c-valid-css-trans.png" alt="Valid CSS" title="Valid CSS" /> </a> </li>
      <li> <a href="http://validator.w3.org/check/referer" title="Valid XHtml" rel="nofollow" target="_blank"> <span>Valid XHTML</span> <img src="images/w3c-valid-xhtml-trans.png" alt="Valid XHtml" title="Valid XHtml" /> </a> </li>
      <li> <a href="http://www.opera.com/download/" title="Opera" rel="nofollow" target="_blank"> <span>Opera</span> <img src="images/opera-trans.png" alt="Opera" title="Opera" /> </a> </li>
      <li> <a href="http://www.apple.com/safari/download/" title="Safari" rel="nofollow" target="_blank"> <span>Safari</span> <img src="images/safari-trans.png" alt="Safari" title="Safari" /> </a> </li>
      <li> <a href="http://www.mozilla.com/en-US/firefox/" title="Firefox" rel="nofollow" target="_blank"> <span>Firefox</span> <img src="images/firefox-trans.png" alt="Firefox" title="Firefox" /> </a> </li>
      <li> <a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank"> <span>Google Chrome</span> <img src="images/google-chrome-trans.png" alt="Google Chrome" title="Google Chrome" /> </a> </li>
      <li> <a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx" title="Internet Explorer" rel="nofollow" target="_blank"> <span>Internet Explorer</span> <img src="images/ie-trans.png" alt="Internet Explorer" title="Internet Explorer" /> </a> </li>
      <li> <a href="http://www.konqueror.org/download/" title="Konqueror" rel="nofollow" target="_blank"> <span>Konqueror</span> <img src="images/konqueror-trans.png" alt="Konqueror" title="Konqueror" /> </a> </li>
    </ul>
  </div>

    サンプルのhtmlコード

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Pure CSS Fish Eye Menu</title>
<link rel="stylesheet" type="text/css" href="css/Pure CSS Fish Eye Menu.css" />
</head>

<body>
<div id="container">
  <div class="expand-down">
    <ul>
      <li> <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Valid CSS" rel="nofollow" target="_blank"> <img src="images/w3c-valid-css-trans.png" alt="Valid CSS" title="Valid CSS" /> <span>Valid CSS</span> </a> </li>
      <li> <a href="http://validator.w3.org/check/referer" title="Valid XHtml" rel="nofollow" target="_blank"> <img src="images/w3c-valid-xhtml-trans.png" alt="Valid XHtml" title="Valid XHtml" /> <span>Valid XHTML</span> </a> </li>
      <li> <a href="http://www.opera.com/download/" title="Opera" rel="nofollow" target="_blank"> <img src="images/opera-trans.png" alt="Opera" title="Opera" /> <span>Opera</span> </a> </li>
      <li> <a href="http://www.apple.com/safari/download/" title="Safari" rel="nofollow" target="_blank"> <img src="images/safari-trans.png" alt="Safari" title="Safari" /> <span>Safari</span> </a> </li>
      <li> <a href="http://www.mozilla.com/en-US/firefox/" title="Firefox" rel="nofollow" target="_blank"> <img src="images/firefox-trans.png" alt="Firefox" title="Firefox" /> <span>Firefox</span> </a> </li>
      <li> <a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank"> <img src="images/google-chrome-trans.png" alt="Google Chrome" title="Google Chrome" /> <span>Google Chrome</span> </a> </li>
      <li> <a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx" title="Internet Explorer" rel="nofollow" target="_blank"> <img src="images/ie-trans.png" alt="Internet Explorer" title="Internet Explorer" /> <span>Internet Explorer</span> </a> </li>
      <li> <a href="http://www.konqueror.org/download/" title="Konqueror" rel="nofollow" target="_blank"> <img src="images/konqueror-trans.png" alt="Konqueror" title="Konqueror" /> <span>Konqueror</span> </a> </li>
    </ul>
  </div>
  <div class="expand-up">
    <ul>
      <li> <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Valid CSS" rel="nofollow" target="_blank"> <span>Valid CSS</span> <img src="images/w3c-valid-css-trans.png" alt="Valid CSS" title="Valid CSS" /> </a> </li>
      <li> <a href="http://validator.w3.org/check/referer" title="Valid XHtml" rel="nofollow" target="_blank"> <span>Valid XHTML</span> <img src="images/w3c-valid-xhtml-trans.png" alt="Valid XHtml" title="Valid XHtml" /> </a> </li>
      <li> <a href="http://www.opera.com/download/" title="Opera" rel="nofollow" target="_blank"> <span>Opera</span> <img src="images/opera-trans.png" alt="Opera" title="Opera" /> </a> </li>
      <li> <a href="http://www.apple.com/safari/download/" title="Safari" rel="nofollow" target="_blank"> <span>Safari</span> <img src="images/safari-trans.png" alt="Safari" title="Safari" /> </a> </li>
      <li> <a href="http://www.mozilla.com/en-US/firefox/" title="Firefox" rel="nofollow" target="_blank"> <span>Firefox</span> <img src="images/firefox-trans.png" alt="Firefox" title="Firefox" /> </a> </li>
      <li> <a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank"> <span>Google Chrome</span> <img src="images/google-chrome-trans.png" alt="Google Chrome" title="Google Chrome" /> </a> </li>
      <li> <a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx" title="Internet Explorer" rel="nofollow" target="_blank"> <span>Internet Explorer</span> <img src="images/ie-trans.png" alt="Internet Explorer" title="Internet Explorer" /> </a> </li>
      <li> <a href="http://www.konqueror.org/download/" title="Konqueror" rel="nofollow" target="_blank"> <span>Konqueror</span> <img src="images/konqueror-trans.png" alt="Konqueror" title="Konqueror" /> </a> </li>
    </ul>
  </div>
</div>

</body>
</html>
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル